@charset "utf-8";
/* CSS Document */
/*旋转*/
.pic360:hover {transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);}
/*放大*/
.picfd:hover,
.k5:hover .k5-1 img,
.k33:hover .k3-1 img{transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2);}
/*旋转放大*/
.picRotateScale:hover {transform: rotate(360deg) scale(1.2);-webkit-transform: rotate(360deg) scale(1.2);-moz-transform: rotate(360deg) scale(1.2);-o-transform: rotate(360deg) scale(1.2);-ms-transform: rotate(360deg) scale(1.2);}
/*左右移动*/
.picTranslate:hover,
.k5:hover .k5-2,
.k33:hover .k3-2 div p img{transform: translate(20px, 0);-webkit-transform: translate(20px, 0);-moz-transform: translate(20px, 0);-o-transform: translate(20px, 0);-ms-transform: translate(20px, 0);}
/*永久旋转5*/	   
.picCircle{-webkit-animation:circle 2s infinite linear;-moz-animation:circle 2s infinite linear;-ms-animation:circle 2s infinite linear;-o-animation:circle 2s infinite linear;animation:circle 2s infinite linear;}
@-webkit-keyframes circle{
	0%{-webkit-transform:rotate(0deg); }
	100%{-webkit-transform:rotate(360deg); }
}
 @-moz-keyframes circle{
	0%{-moz-transform:rotate(0deg); }
	100%{-moz-transform:rotate(360deg); }
}
 @-ms-keyframes circle{
	0%{-ms-transform:rotate(0deg); }
	100%{-ms-transform:rotate(360deg); }
}
 @-o-keyframes circle{
	0%{-o-transform:rotate(0deg); }
	100%{-o-transform:rotate(360deg); }
}
@keyframes circle{
	0%{transform:rotate(0deg); }
	100%{transform:rotate(360deg); }
}
/*永久放大缩小*/   
.picBounce{border-radius:50%;-webkit-animation:bounce 2s infinite linear;-moz-animation:bounce 2s infinite linear;-ms-animation:bounce 2s infinite linear;-o-animation:bounce 2s infinite linear;animation:bounce 2s infinite linear;}
	   
@-webkit-keyframes bounce {
	0%,100%{transform: scale(1.0, 1.0);-webkit-transform: scale(1.0, 1.0);}
	50% {transform: scale(1.12, 1.12);-webkit-transform: scale(1.12, 1.12);}
}
@-moz-keyframes bounce {
	0%,100%{transform: scale(1.0, 1.0);-moz-transform: scale(1.0, 1.0);}
	50% {transform: scale(1.12, 1.12);-moz-transform: scale(1.12, 1.12);}
}
@-ms-keyframes bounce {
	0%,100%{transform: scale(1.0, 1.0);-ms-transform: scale(1.0, 1.0);}
	50% {transform: scale(1.12, 1.12);-ms-transform: scale(1.12, 1.12);}
}  
@-o-keyframes bounce {
	0%,100%{transform: scale(1.0, 1.0);-o-transform: scale(1.0, 1.0);}
	50% {transform: scale(1.12, 1.12);-o-transform: scale(1.12, 1.12);}
}	   
@keyframes bounce {
	0%,100%{transform: scale(1.0, 1.0);-webkit-transform: scale(1.0, 1.0);}
	50% {transform: scale(1.12, 1.12);-webkit-transform: scale(1.12, 1.12);}
}	   	   
/*永久上下晃动*/   
.picBounceDown{-webkit-animation:bounce-down 2s infinite linear;-moz-animation:bounce-down 2s infinite linear;-ms-animation:bounce-down 2s infinite linear;-o-animation:bounce-down 2s infinite linear;animation:bounce-down 2s infinite linear;}	   
@-webkit-keyframes bounce-down {
	25% {-webkit-transform: translateY(-10px);}
	50%, 100% {-webkit-transform: translateY(0);}
	75% {-webkit-transform: translateY(10px);}
}
@-moz-keyframes bounce-down {
	25% {-moz-transform: translateY(-10px);}
	50%, 100% {-moz-transform: translateY(0);}
	75% {-moz-transform: translateY(10px);}
}
@-ms-keyframes bounce-down {
	25% {-ms-transform: translateY(-10px);}
	50%, 100% {-ms-transform: translateY(0);}
	75% {-ms-transform: translateY(10px);}
}
@-o-keyframes bounce-down {
	25% {-o-transform: translateY(-10px);}
	50%, 100% {-o-transform: translateY(0);}
	75% {-o-transform: translateY(10px);}
}
@keyframes bounce-down {
	25% {transform: translateY(-10px);}
	50%, 100% {transform: translateY(0);}
	75% {transform: translateY(10px);}
}
 
 /*永久左右移动8*/   
.picBounceLeft{-webkit-animation:bounce-left 2s infinite linear;-moz-animation:bounce-left 2s infinite linear;-ms-animation:bounce-left 2s infinite linear;-o-animation:bounce-left 2s infinite linear;animation:bounce-left 2s infinite linear;}	   
@-webkit-keyframes bounce-left {
	25% {-webkit-transform: translateX(-10px);}
	50%, 100% {-webkit-transform: translateX(0);}
	75% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes bounce-left {
	25% {-moz-transform: translateX(-10px);}
	50%, 100% {-moz-transform: translateX(0);}
	75% {-moz-transform: translateX(10px);}
}
@-ms-keyframes bounce-left {
	25% {-ms-transform: translateX(-10px);}
	50%, 100% {-ms-transform: translateX(0);}
	75% {-ms-transform: translateX(10px);}
}
@-o-keyframes bounce-left {
	25% {-o-transform: translateX(-10px);}
	50%, 100% {-o-transform: translateX(0);}
	75% {-o-transform: translateX(10px);}
}
@keyframes bounce-left {
	25% {transform: translateX(-10px);}
	50%, 100% {transform: translateX(0);}
	75% {transform: translateX(10px);}
}
	   
/*中间固定左右晃动9*/	   
.picSwing {-webkit-transform-origin: top center;-moz-transform-origin: top center;-o-transform-origin: top center;transform-origin: top center;-webkit-animation:swing 2s infinite linear;-moz-animation:swing 2s infinite linear;-ms-animation:swing 2s infinite linear;-o-animation:swing 2s infinite linear;animation:swing 2s infinite linear;}	  	   
@-webkit-keyframes swing {
	20%, 40%, 60%, 80%, 100% {-webkit-transform-origin:top center}
	20% {-webkit-transform:rotate(15deg)}
	40% {-webkit-transform:rotate(-10deg)}
	60% {-webkit-transform:rotate(5deg)}
	80% {-webkit-transform:rotate(-5deg)}
	100% {-webkit-transform:rotate(0deg)}
}
@-moz-keyframes swing {
	20% {-moz-transform:rotate(15deg)}
	40% {-moz-transform:rotate(-10deg)}
	60% {-moz-transform:rotate(5deg)}
	80% {-moz-transform:rotate(-5deg)}
	100% {-moz-transform:rotate(0deg)}
}
@-o-keyframes swing {
	20% {-o-transform:rotate(15deg)}
	40% {-o-transform:rotate(-10deg)}
	60% {-o-transform:rotate(5deg)}
	80% {-o-transform:rotate(-5deg)}
	100% {-o-transform:rotate(0deg)}
}
@keyframes swing {
	20% {transform:rotate(15deg)}
	40% {transform:rotate(-10deg)}
	60% {transform:rotate(5deg)}
	80% {transform:rotate(-5deg)}
	100% {transform:rotate(0deg)}
}
/*四周扩算  <div class="s8 abs"><em></em></div>*/
.s8{position: absolute;left: 510px;top: 170px;}
.s8 em{width:21px;height:19px; margin:0 auto; background:url(../images/8-1.png) no-repeat center center;cursor:pointer;display:block;position:relative;}
.s8 em:after { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; box-shadow: 0 0 1px 2px rgba(255,255,255,0.5); top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; z-index: 3; opacity: 0; -webkit-animation: halo 2s 0.5s infinite ease-out; -moz-animation: halo 2s 0.5s infinite ease-out; animation: halo 2s 0.5s infinite ease-out; }
@-webkit-keyframes halo { 0% { opacity: 0;-webkit-transform: scale(0.1); }
50% {opacity: 1; }
100%{opacity: 0;-webkit-transform: scale(1.2); } }
@-moz-keyframes halo {0% { opacity: 0; -moz-transform: scale(0.1); }
50% { opacity: 1; }
100%{ opacity: 0; -moz-transform: scale(1.2); } }
@-ms-keyframes halo {0% { opacity: 0; }
50% { opacity: 1; }
100%{opacity: 0; } }
@-o-keyframes halo {0% { opacity: 0; -o-transform: scale(0.1); }
50% {opacity: 1; }
100%{ opacity: 0;-o-transform: scale(1.2); } }
@keyframes halo {0% { opacity: 0; transform: scale(0.1); }
50% {opacity: 1; }
100%{opacity: 0;transform: scale(1.2); } }

/*拉帘式*/
.but1 {position: relative;}
.but1 span{z-index: 2;	display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.but1::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;opacity: 0;background-color: rgba(255,255,255,0.2);-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;-webkit-transform: scale(0, 1);transform: scale(0, 1);}
.but1:hover::before{opacity: 1;-webkit-transform: scale(1, 1);transform: scale(1, 1);}


